<template>
  <div class="evaluate-wapper" v-if="evaluateRate.totalCount">
  <!-- 由于从服务器返回数据和页面渲染存在时间差，所以可以使用v-if添加个判断，让有数据的时候再开始渲染页面，防止报错 -->
    <div class="evaluate-container">
      <div class="evaluate-title">商品评价({{evaluateRate.totalCount}})</div>
      <div class="evaluate-tag">
        <div v-for="(item, index) in evaluateRate.keywords"
          :key="index" class="item">{{item.word}}({{item.count}})</div>
      </div>
      <div class="evaluate-user">
        <!-- evaluateRate.rateList中的内容是在数组里的[{headPic:xxx,userName:xxx}],所以要先取数组中的第一项evaluateRate.rateList[0]--对象，在对象中才能以.键值名来取键值 -->
        <span class="evaluate-img"><img :src="evaluateRate.rateList[0].headPic" class="headpic" /></span><span class="name">{{evaluateRate.rateList[0].userName}}</span>
      </div>
      <div class="evaluate-content">{{evaluateRate.rateList[0].content}}</div>
      <div class="evaluate-specification">{{evaluateRate.rateList[0].dateTime}} {{evaluateRate.rateList[0].skuInfo}}</div>
    </div>
  </div>
</template>

<script>
  import { getProductDetail } from 'api/product';

  export default {
    name: 'ProductEvaluate',
    props: {
      productId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        evaluateRate: ''
      };
    },
    created() {
      this.getDetail(this.productId).then(() => {
        this.$emit('loaded');
      });
    },
    methods: {
      getDetail(id) {
        return getProductDetail(id).then(data => {
          this.evaluateRate = data.data.rate;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";
  .evaluate-wapper {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
  }

  .evaluate-wapper .evaluate-container {
    padding: 0 10px;
    width: 100%;
  }

  .evaluate-wapper .evaluate-title {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #777;
  }

  .evaluate-wapper .evaluate-tag {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    color: #777;
  }

  .evaluate-wapper .evaluate-tag .item {
    height: 30px;
    background-color: #ffeeee;
    line-height: 30px;
    border-radius: 8px;
    padding: 0 5px;
    margin: 5px 10px 5px 0;
  }

  .evaluate-wapper .evaluate-user {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .evaluate-wapper .evaluate-user .evaluate-img {
    height: 30px;
    width: 30px;
    display: inline-block;
  }

  .evaluate-wapper .evaluate-user .headpic {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .evaluate-wapper .evaluate-user .name {
    padding-left: 10px;
  }

  .evaluate-wapper .evaluate-content {
    margin-top: 5px;
    line-height: 15px;
  }

  .evaluate-wapper .evaluate-specification {
    color: #999;
    padding: 10px 0;
    line-height: 15px;
  }

</style>
